<template>
  <div class="main-content">
    <div style="display: flex;">
      <div style="flex: 1; margin-right: 10px; width: 0;">
        <!-- 博客内容 -->
        <div class="card" style="padding: 30px; margin-bottom: 10px;">
          <!-- <div style="font-weight: bold; font-size: 24px; margin-bottom: 20px">{{ blog.title }}</div>  -->
          <div style="font-weight: bold; font-size: 24px; margin-bottom: 20px">{{ question.title }}</div>
          <div style="color: #666; margin-bottom: 20px;">
            <span style="margin-right: 20px;"><i class="el-icon-user">{{question.user.username}}</i></span>
            <span style="margin-right: 20px;"><i class="el-icon-date">{{ question.createTime }}</i></span>
            <span style="margin-right: 20px;"><i class="el-icon-view">55</i></span>
            <span>
              <el-tag type="primary" style="margin-right: 5px;">{{question.tag}}</el-tag>
            </span>
          </div>
          <div class="w-e-text" >
            <div>
              <vue-markdown :source="question.description"></vue-markdown>
            </div>
          </div>
          <!-- 点赞收藏 -->
          <div class="card" style="text-align: center; margin-top: 10px; font-size: 20px; color: #666; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0); max-height: 50px">
            <span style="margin-right: 20px; cursor: pointer;"><i class="el-icon-s-opportunity"></i>1002</span>
            <span style="cursor: pointer;"><i class="el-icon-star-off"></i>198</span>
          </div>
        </div>



        <!-- 评论 -->
        <div class="card" style="margin-top: 10px;">
          <h2 style="margin-bottom: 20px;">回答 {{ question.answerNum}}</h2>

          <div style="margin-bottom: 20px;">
            <el-input
                v-model="message"
                type="textarea"
                placeholder="请输入回答"
            ></el-input>
            <div style="text-align: right; margin-top: 5px;">
              <el-button type="primary" @click="sendMessage">发 送</el-button>
            </div>
          </div>



          <div >
            <el-row :gutter="20">
            <el-col :span="24" v-for="(answer, index) in question.answer" :key="index" class="article-card">
              <div style="display: flex; gap: 20px; margin-bottom: 20px;">
                <img :src="answer.user.uheadshot" style="width: 50px; height: 50px; border-radius: 50%;">
                <div style="flex: 1;display: flex; gap: 20px; margin: 20px 0;">
                  <!-- 评论 -->
                  <div style="margin-bottom: 10px;">
                    <div style="color: #666; margin-bottom: 10px; font-size: 15px;">{{answer.user.uname}}</div>
                    <div style="color: #444; margin-bottom: 10px;">{{answer.answer}}</div>
                    <div style="color: #888; font-size: 13px;"><span style="margin-right: 20px;">{{answer.createTime}}</span>
                      <span style="cursor: pointer;"><i class="el-icon-s-comment"></i>评论</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            </el-row>
          </div>

        </div>
      </div>

      <div style="width: 260px;">
        <div class="card">
          <div style="display: flex;">
            <img :src="question.user.uheadshot" style="width: 50px; height: 50px; border-radius: 50%;">
            <div style="flex: 1; margin-left: 20px;">
              <div style="font-weight: bold; margin-bottom: 5px;" @click="$router.push(`/front/user/${uid}`)">{{question.user.uname}}</div>
              <div style="color: #666; font-size: 13px;" class="line2">nb</div>
            </div>
          </div>
          <div style="display: flex; padding-top: 10px;">
            <div style="flex: 1; text-align: center;">
              <div style="margin-bottom: 5px;">文章</div>
              <div style="color: #888;">3</div>
            </div>
            <div style="flex: 1; text-align: center;">
              <div style="margin-bottom: 5px;">点赞</div>
              <div style="color: #888;">14</div>
            </div>
            <div style="flex: 1; text-align: center;">
              <div style="margin-bottom: 5px;">收藏</div>
              <div style="color: #888;">13</div>
            </div>
          </div>
        </div>

        <div class="card" style="margin-top: 10px;">
          <div style="font-weight: bold; font-size: 18px; padding-bottom: 10px; border-bottom: 1px solid #ddd;">相关推荐</div>
          <div>
            <div>
              <div style="margin-top: 20px; font-size: 15px;" class="recommend">世界冠军柯洁：“我坚持最久的一件事是围棋”</div>
              <div style="color: #888; margin-top: 5px;">
                <span>阅读</span><span>4</span>
                <span style="margin-left: 20px;">点赞</span><span>0</span>
              </div>
            </div>

            <div>
              <div style="margin-top: 20px; font-size: 15px;" class="recommend">围棋中简单的布局思路</div>
              <div style="color: #888; margin-top: 5px;">
                <span>阅读</span><span>100</span>
                <span style="margin-left: 20px;">点赞</span><span>20</span>
              </div>
            </div>

            <div>
              <div style="margin-top: 20px; font-size: 15px;" class="recommend">新人王赛决赛在上海马桥开幕 首局王楚轩先胜周子弈</div>
              <div style="color: #888; margin-top: 5px;">
                <span>阅读</span><span>66</span>
                <span style="margin-left: 20px;">点赞</span><span>55</span>
              </div>
            </div>

            <div>
              <div style="margin-top: 20px; font-size: 15px;" class="recommend">独行侠总冠军</div>
              <div style="color: #888; margin-top: 5px;">
                <span>阅读</span><span>77</span>
                <span style="margin-left: 20px;">点赞</span><span>11</span>
              </div>
            </div>

            <div>
              <div style="margin-top: 20px; font-size: 15px;" class="recommend">独行侠总冠军</div>
              <div style="color: #888; margin-top: 5px;">
                <span>阅读</span><span>77</span>
                <span style="margin-left: 20px;">点赞</span><span>11</span>
              </div>
            </div>

            <div>
              <div style="margin-top: 20px; font-size: 15px;" class="recommend">晚安波士顿</div>
              <div style="color: #888; margin-top: 5px;">
                <span>阅读</span><span>0</span>
                <span style="margin-left: 20px;">点赞</span><span>101</span>
              </div>
            </div>

            <div>
              <div style="margin-top: 20px; font-size: 15px;" class="recommend">独行侠总冠军</div>
              <div style="color: #888; margin-top: 5px;">
                <span>阅读</span><span>77</span>
                <span style="margin-left: 20px;">点赞</span><span>11</span>
              </div>
            </div>
            <div>
              <div style="margin-top: 20px; font-size: 15px;" class="recommend">独行侠总冠军</div>
              <div style="color: #888; margin-top: 5px;">
                <span>阅读</span><span>77</span>
                <span style="margin-left: 20px;">点赞</span><span>11</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {useRoute} from "vue-router/composables";
import VueMarkdown from 'vue-markdown'
import answer from "../front/Answer.vue";

export default {
  name: 'BlogDetail',
  computed: {
    answer() {
      return answer
    }
  },
  data() {
    return {
      qid: 1,
      message: "", // 绑定输入框的值
      question:{
        title:'什么时候让你突然感觉自己是活着的',
        createTime:'2022-1-1',
        description:'人或多或少浑浑噩噩，但是总有时候会让你觉得自己的存在是有意思的，请讲一讲你的意义',
        tag:'哲学',
        answerNum:1,
        user:{
          uname:'Azraelkaxi',
          uheadshot:'',
          uid:'8'
        },
        answer:[
          {
            createTime:'2022-1-1',
            answer:'这',
            user:{
              uname:'影默',
              uheadshot:'',
              uid:'8'
            },
          },

        ]

      }
    };
  },
  methods: {
    getBlogDetail(){
      this.qid  = useRoute().params.qid;
      let url = `/api/question/${this.qid}`;
      this.$http.get(url, {headers: {token: this.token}}).then(res=>{
        this.question = res.data.data;
      })
    },

    sendMessage() {
      // 检查输入是否为空
      if (!this.message.trim()) {
        this.$message.error("请输入内容再发送！");
        return;
      }

      let url = `/api/question/${this.qid}`;
      console.log(this.message)


      // 发送 axios 请求
      this.$http.post(url,
          {
        message: this.message, // 将输入框的内容作为请求数据
       },
          {
            headers:{token: this.token}
          })
          .then(response => {
            // 请求成功后的处理逻辑
            this.$message.success("发送成功！");
            console.log("后端响应：", response.data);
            this.message = ""; // 清空输入框
          })
          .catch(error => {
            // 请求失败的处理逻辑
            this.$message.error("发送失败，请稍后重试！");
            console.error("发送失败：", error);
          });
    },
  },
  created() {
    this.token = localStorage.getItem("token");
    if (!this.token) {
      this.$router.push("/login");
    } else {
      this.getBlogDetail();
    }
  },
  components: {
    'vue-markdown': VueMarkdown
  }
}
</script>

<style scoped>
.w-e-text {
  font-size: 15px;
  color: #333;
  line-height: 2.5;
}
.recommend:hover{
  color: #2a60c9;
  cursor: pointer;
}
</style>